<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | User Profile</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
  <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">

  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" href="index.html">
          <i class="fa fa-paper-plane"></i>
          <span>博客前台首页</span>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <h1>
      <a th:href="@{index}" class="brand-link">
        <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
        <span class="brand-text font-weight-light">WhyBlog</span>
      </a>
    </h1>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-header">仪表盘</li>
          <li class="nav-item">
            <a th:href="@{/admin/dashboard}" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>仪表盘</p>
            </a>
          </li>
          <!--          博客发布部分-->
          <li class="nav-header">博客编辑</li>
          <li class="nav-item">
            <a th:href="@{/admin/addBlog}" class="nav-link">
              <i class="nav-icon fas fa-edit"></i>
              <p>发布博客</p>
            </a>
          </li>
          <!--          博客管理-->
          <li class="nav-header">管理模块</li>
          <li class="nav-item">
            <a th:href="@{/admin/blog-mgr}" class="nav-link active">
              <i class="fa fa-list-alt nav-icon" aria-hidden="true"></i>
              <p>博客管理</p>
            </a>
          </li>

          <li class="nav-item">
            <a th:href="@{/admin/type-mgr}" class="nav-link">
              <i class="fa fa-bookmark nav-icon" aria-hidden="true"></i>
              <p>分类管理</p>
            </a>
          </li>

          <li class="nav-header">系统管理</li>
          <li class="nav-item">
            <a th:href="@{/admin/config}" class="nav-link">
              <i class="fa fa-wrench nav-icon"></i>
              <p>系统配置</p>
            </a>
          </li>
          <li class="nav-item">
            <a th:href="@{/admin/exit}" class="nav-link">
              <i class="fa fa-sign-out-alt nav-icon"></i>
              <p>安全退出</p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper mt-3">
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card card-teal card-outline">
              <div class="card-header">
                <h3 class="card-title">博客列表</h3>
              </div>
              <div class="card-body">

              </div>
              <hr class="m-0">
              <!-- /.card-header -->
              <div class="card-body table-responsive">
                <table id="testTable" class="table table-bordered table-hover text-nowrap">
                  <thead>
                  <tr>
                    <!--                    <th><input type="checkbox" value="' + data + '" name="id"/></th>-->
                    <th>标题</th>
                    <th>分类</th>
<!--                    <th>发布</th>-->
                    <th>浏览量</th>
                    <th>发布时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                  </tr>
                  <tr th:each="blog :${blogs.getList()}">
                    <!--                    <th><input type="checkbox" value="' + data + '" name="id"/></th>-->
                    <th th:text="${blog.name}">内容</th>
                    <th th:text="${blog.type.name}"></th>
                    <th th:text="${blog.views}"></th>
                    <th th:text="${#dates.format(blog.create_time,'yyyy/mm/dd/ss')}">内容</th>
                    <th th:text="${#dates.format(blog.update_time,'yyyy/mm/dd/ss')}">内容</th>
                    <th>
                      <a id="del" class="btn btn-danger btn-xs" th:href="'/admin/deleteBlog/?id='+${blog.id}">删除</a>
                     <a class="btn btn-primary btn-xs" th:href="'/admin/edit/?id='+${blog.id}">更新</a>
                    </th>
                  </tr>
                  </thead>
                </table>
                <nav aria-label="Page navigation example">
                  <ul class="pagination justify-content-end">

                    <li  th:if="${blogs.hasPreviousPage}" class="page-item ">
      <a  class="page-link"  th:href="'/admin/blog-mgr?pageNum='+${blogs.prePage}"  tabindex="-1" aria-disabled="true">Previous</a>
                    </li>
                    <li th:each="num:${blogs.navigatepageNums}" class="page-item">
                      <a class="page-link" th:href="'/admin/blog-mgr?pageNum='+${num}" th:text="${num}"></a>
                    </li>

                    <li  class="page-item">
                      <a th:if="${blogs.hasNextPage}" class="page-link"  th:href="'/admin/blog-mgr?pageNum='+${blogs.nextPage}"  tabindex="-1" aria-disabled="true">Next</a>
                    </li>
                  </ul>
                </nav>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>

      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
<!--    <p class="text-center mb-1">-->
<!--      Copyright © 2020 ZengZK Designed by ZengZK Powered by AdminLTE-->
<!--    </p>-->
    <p class="text-center">
      <a href="">粤ICP备20040058号</a>
    </p>
  </footer>
</div>
<div class="modal" id="deleteArticleModal" tabindex="-1" role="dialog" aria-labelledby="deleteArticleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteArticleModalLabel">确认删除</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        删除后不能恢复，确认删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">删除</button>
      </div>
    </div>
  </div>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>

<!-- DataTables -->
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script>


<!-- AdminLTE App -->
<script src="/js/adminlte.min.js"></script>

</body>
</html>
